<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!--详情-->
<div class="modal fade" id="modal-info">
    <div class="modal-dialog" style="width:100%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">查看预购计划</h4>
            </div>
            <div class="modal-body">
                <section class="content" style="padding: 5px!important;">
                    <div class="row">
                        <form id="infoPreOrderPlanForm" class="form-horizontal">
                            <div class="col-xs-12"
                                 style="max-width: 100%;max-height: 80vh;overflow: auto;padding: 0!important;">
                                <table id="table_import_info" class="t1 t3">
                                    <thead>
                                    <!--                                    <tr>-->
                                    <!--                                        <td colspan="12">-->
                                    <!--                                            <img th:src="@{/img/logo.png}" width="64px" height="40px"-->
                                    <!--                                                 style="margin-top: -30px">-->
                                    <!--                                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">-->
                                    <!--                                                <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>-->
                                    <!--                                                <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>-->
                                    <!--                                            </div>-->
                                    <!--                                        </td>-->
                                    <!--                                        <td style="width: 8%"></td>-->
                                    <!--                                    </tr>-->
                                    <tr>
                                        <td colspan="12" style="font-size: 16px;letter-spacing: 4px;">
                                            预购计划单
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="width: 8%">主题</td>
                                        <td colspan="7" style="width: 11%;font-size: 14px;">
                                            <input type="text" class="form-control" name="name"
                                                   placeholder="请输入预购主题"/>
                                        </td>
                                        <td style="width: 8%">预购编号</td>
                                        <td colspan="2" style="width: 21%">
                                            <input style="background: #FFFFFF" type="text" class="form-control"
                                                   name="code" readonly="readonly"/>
                                        </td>

                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td style="width: 3%">序号</td>
                                        <td colspan="3">物料描述</td>
                                        <td style="width: 8%">物料编码</td>
                                        <td style="width: 4%">预购单位</td>
                                        <td style="width: 6%">预购数量</td>
                                        <td style="width: 6%">业务员</td>
                                        <td style="width: 10%">预购备注</td>
                                        <td style="width: 6%">品牌</td>
                                        <td style="width: 8%">预购项目号</td>
                                        <td style="width: 12%">预购项目名</td>
                                        <td></td>
                                    </tr>
                                    </thead>
                                    <tbody id="outForInfo">
                                    <tr>
                                        <td>1</td>
                                        <td colspan="3">
                                            <input type="text" class="form-control" name="materialDesc1"
                                                   autocomplete="off" maxlength="255"/>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="materialCode" autocomplete="off"
                                                   maxlength="255">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="unit" autocomplete="off"
                                                   maxlength="255">
                                        </td>
                                        <td>
                                            <input type="number" class="form-control" name="num" autocomplete="off">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="purchaser" autocomplete="off"
                                                   maxlength="255">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="preOrderRemark"
                                                   autocomplete="off" maxlength="255">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="brand" autocomplete="off"
                                                   maxlength="255">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="proCode" autocomplete="off"
                                                   maxlength="255"/>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="proName" autocomplete="off"
                                                   maxlength="255">
                                        </td>
                                        <td>
                                            <label class="badge label-default" name="uploadFileText">无附件</label>
                                            <input type="hidden" class="form-control" name="id" readonly="readonly"/>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                    <!--                    <div th:include="include :: tip"></div>-->
                </section>
            </div>
        </div>
    </div>
</div>
<section class="content-header"><h1>预购明细列表</h1></section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="form-group">
                        <label for="input_details"><input id="input_details" value="2" type="radio"
                                                          name="dataDisplayMode" checked="checked"/>&nbsp;明细</label>
                        <label for="input_summary"><input id="input_summary" value="1" type="radio"
                                                          name="dataDisplayMode"/>&nbsp;汇总</label>
                    </div>
                    <!--汇总-->
                    <form id="queryFormForSummary" method="post" class="form-horizontal" style="display: none;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="width:320px">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">预购主题</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="name"
                                               class="form-control"
                                               placeholder="请输入预购主题">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">预购编号</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="code"
                                               class="form-control"
                                               placeholder="请输入预购编号">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">申请人</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="applicant"
                                               class="form-control"
                                               placeholder="请输入申请人">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">业务员</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="purchaser"
                                               class="form-control"
                                               placeholder="请输入业务员">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 640px;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">预购日期</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input type="text" class="form-control datepicker" name="createTimeStartTime"
                                               readonly="readonly"/>
                                        <span> 至 </span>
                                        <input type="text" class="form-control datepicker" name="createTimeEndTime"
                                               readonly="readonly"/>
                                    </div>
                                </div>
                                <button id="btn-summary-search" type="button" class="btn btn-success pull-right" onclick="search()">
                                    <span class="Bold"><i class="fa fa-search"></i> 搜索</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    <!--高级-->
                    <form id="queryFormForAdvanced" action="exportExcelForAdvanced" method="post"
                          class="form-horizontal" style="display: none;">
                        <div class="form-inline">
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">物料跟踪号</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="trackNumber"
                                           class="form-control"
                                           placeholder="请输入物料跟踪号">
                                </div>
                            </div>
                                <div class="form-group" style="width:320px">
                                    <label class="col-md-4 control-label" style="width: 120px;">物料描述</label>
                                    <div class="col-md-7" style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="materialDesc"
                                               class="form-control"
                                               placeholder="请输入物料描述">
                                    </div>
                                </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">采购项目号</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="proCode"
                                           class="form-control"
                                           placeholder="请输入采购项目号">
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">采购项目名</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="proName"
                                           class="form-control"
                                           placeholder="请输入采购项目名">
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">预购单位</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="unit"
                                           class="form-control"
                                           placeholder="请输入预购单位">
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">采购合同</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="pcNo"
                                           class="form-control"
                                           placeholder="请输入采购合同">
                                </div>
                            </div>
                            <div class="form-group" style="width:640px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">预购数量</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input type="text"
                                           style="width: 102px;"
                                           class="form-control"
                                           name="minNum"
                                           placeholder="请输入下限"/>
                                    <span> 至 </span>
                                    <input type="text"
                                           style="width: 102px;"
                                           class="form-control"
                                           name="maxNum"
                                           placeholder="请输入上限"/>
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">采购单位</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="purchUnit"
                                           class="form-control"
                                           placeholder="请输入采购单位">
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">税率</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="taxRate"
                                           class="form-control"
                                           placeholder="请输入税率">
                                </div>
                            </div>
                            <div class="form-group" style="width:640px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">采购数量</label>
                                <div class="col-md-7"
                                     style="padding: 0;">
                                    <input type="text"
                                           style="width: 102px"
                                           class="form-control"
                                           name="minPurchNum"
                                           placeholder="请输入下限"/>
                                    <span> 至 </span>
                                    <input type="text"
                                           style="width: 102px"
                                           class="form-control"
                                           name="maxPurchNum"
                                           placeholder="请输入上限"/>
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">供应商</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="supplier"
                                           class="form-control"
                                           placeholder="请输入供应商">
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">导出记录</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="exportRecord"
                                           class="form-control"
                                           placeholder="请输入导出记录">
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">物料编码</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="materialCode"
                                           class="form-control"
                                           placeholder="请输入物料编码">
                                </div>
                            </div>
                            <div class="form-group" style="width:640px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">含税单价</label>
                                <div class="col-md-7"
                                     style="padding: 0;">
                                    <input type="text"
                                           style="width: 102px"
                                           class="form-control"
                                           name="minUnitPrice"
                                           placeholder="请输入下限"/>
                                    <span> 至 </span>
                                    <input type="text"
                                           style="width: 102px"
                                           class="form-control"
                                           name="maxUnitPrice"
                                           placeholder="请输入上限"/>
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">申请人</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="applicant"
                                           class="form-control"
                                           placeholder="请输入申请人">
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">业务员</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="purchaser"
                                           class="form-control"
                                           placeholder="请输入业务员">
                                </div>
                            </div>
                            <div class="form-group" style="width:640px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">总价</label>
                                <div class="col-md-7"
                                     style="padding: 0;">
                                    <input type="text"
                                           style="width: 102px"
                                           class="form-control"
                                           name="minTotalPrice"
                                           placeholder="请输入下限"/>
                                    <span> 至 </span>
                                    <input type="text"
                                           style="width: 102px"
                                           class="form-control"
                                           name="maxTotalPrice"
                                           placeholder="请输入上限"/>
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">预购备注</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="preOrderRemark"
                                           class="form-control"
                                           placeholder="请输入预购备注">
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">采购备注</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="purchRemark"
                                           class="form-control"
                                           placeholder="请输入采购备注">
                                </div>
                            </div>
                            <div class="form-group" style="width:640px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">预购日期</label>
                                <div class="col-md-7"
                                     style="padding: 0;">
                                    <input type="text"
                                           style="padding: 4px!important;"
                                           class="form-control datepicker"
                                           name="createTimeStartTime"
                                           readonly="readonly"/>
                                    <span> 至 </span>
                                    <input type="text"
                                           style="padding: 4px!important;"
                                           class="form-control datepicker"
                                           name="createTimeEndTime"
                                           readonly="readonly"/>
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">关联预购主题</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="name"
                                           class="form-control"
                                           placeholder="请输入关联预购主题">
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label" style="width: 120px;">预购计划编码</label>
                                <div class="col-md-7" style="padding: 0;">
                                    <input style="width: 100%"
                                           type="text"
                                           name="code"
                                           class="form-control"
                                           placeholder="请输入预购计划编码">
                                </div>
                            </div>
                            <div class="form-group" style="width:640px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">采购日期</label>
                                <div class="col-md-7"
                                     style="padding: 0;">
                                    <input type="text"
                                           style="padding: 4px!important;"
                                           class="form-control datepicker"
                                           name="purchCreateStartTime"
                                           readonly="readonly"/>
                                    <span> 至 </span>
                                    <input type="text"
                                           style="padding: 4px!important;"
                                           class="form-control datepicker"
                                           name="purchCreateEndTime"
                                           readonly="readonly"/>
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">票据类型</label>
                                <div class="col-md-7"
                                     style="padding: 0;">
                                    <select name="billType"
                                            class="form-control select2"
                                            style="text-align: center!important;text-align-last: center!important;width:100%!important;">
                                        <option selected value=""> ---请选择---</option>
                                        <option th:each="dict : ${dictCommonList}" th:value="${dict.name}"
                                                th:text="${dict.name}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">收货状态</label>
                                <div class="col-md-7"
                                     style="padding: 0;">
                                    <select name="receiptStatus"
                                            class="form-control"
                                            style="text-align: center!important;text-align-last: center!important;width:100%!important;">
                                        <option value="" selected="selected">全部</option>
                                        <option value="1">未收货</option>
                                        <option value="2">已收货</option>
                                        <option value="3">无需收货</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">采购状态</label>
                                <div class="col-md-7"
                                     style="padding: 0;">
                                    <select name="isProcurement"
                                            class="form-control"
                                            style="text-align: center!important;text-align-last: center!important;width:100%!important;">
                                        <option value="" selected="selected">请选择</option>
                                        <option value="1">未采购</option>
                                        <option value="2">已采购</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" style="width:320px">
                                <label class="col-md-4 control-label"
                                       style="width: 120px;">是否有附件</label>
                                <div class="col-md-7"
                                     style="padding: 0;">
                                    <select name="attachmentIsExist"
                                            class="form-control"
                                            style="text-align: center!important;text-align-last: center!important;width:100%!important;">
                                        <option value="0" selected="selected">全部</option>
                                        <option value="1">有附件</option>
                                        <option value="2">没有附件</option>
                                        >
                                    </select>
                                </div>
                            </div>
                            <button type="button" class="btn btn-default pull-right" style="margin-left: 20px"
                                    onclick="switchGeneralSearch('general')">
                                <span class="Bold"><i class="fa fa-search-minus"></i> 普通搜索</span>
                            </button>
                            <button id="btn-advanced-search" type="button" class="btn btn-success pull-right" onclick="search()">
                                <span class="Bold"><i class="fa fa-search"></i> 搜索</span>
                            </button>
                        </div>
                    </form>
                    <!--常规-->
                    <form id="queryFormForGeneral" action="exportExcel" method="post" class="form-horizontal">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="width: 320px!important;">
                                    <label class="col-md-4 control-label" style="width: 120px;">物料描述</label>
                                    <div class="col-md-7" style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="materialDesc"
                                               class="form-control"
                                               placeholder="请输入物料描述">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px!important;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">物料跟踪号</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="trackNumber"
                                               class="form-control"
                                               placeholder="请输入物料跟踪号">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px!important;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">采购项目号</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="proCode"
                                               class="form-control"
                                               placeholder="请输入采购项目号">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px!important;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">采购项目名</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="proName"
                                               class="form-control"
                                               placeholder="请输入采购项目名">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px!important;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">供应商</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="supplier"
                                               class="form-control"
                                               placeholder="请输入供应商">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px!important;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">采购合同</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="pcNo"
                                               class="form-control"
                                               placeholder="请输入采购合同">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px!important;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">物料编码</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input style="width: 100%"
                                               type="text"
                                               name="materialCode"
                                               class="form-control"
                                               placeholder="请输入物料编码">
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px!important;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">收货状态</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <select name="receiptStatus"
                                                class="form-control"
                                                style="text-align: center!important;text-align-last: center!important;width:100%!important;">
                                            <option value="" selected="selected">全部</option>
                                            <option value="1">未收货</option>
                                            <option value="2">已收货</option>
                                            <option value="4">部分收货</option>
                                            <option value="3">无需收货</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group" style="width: 320px!important;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">采购状态</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <select name="isProcurement"
                                                class="form-control"
                                                style="text-align: center!important;text-align-last: center!important;width:100%!important;">
                                            <option value="" selected="selected">请选择</option>
                                            <option value="1">未采购</option>
                                            <option value="2">已采购</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group" style="width: 640px!important;">
                                    <label class="col-md-4 control-label"
                                           style="width: 120px;">采购日期</label>
                                    <div class="col-md-7"
                                         style="padding: 0;">
                                        <input type="text" class="form-control datepicker"
                                               name="purchCreateStartTime"
                                               readonly="readonly"/>
                                        <span> 至 </span>
                                        <input type="text" class="form-control datepicker"
                                               name="purchCreateEndTime"
                                               readonly="readonly"/>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-default pull-right" style="margin-left: 20px;"
                                        onclick="switchAdvancedSearch('advance')">
                                    <span class="Bold"><i class="fa fa-search-plus"></i> 高级搜索</span>
                                </button>
                                <button id="btn-general-search" type="button" class="btn btn-success pull-right" onclick="search()">
                                    <span class="Bold"><i class="fa fa-search"></i> 搜索</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="row" id="toolbar">
                        <div id="div_toolbar" class="form-inline">
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" style="width: 2800px;"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    /**
     * detailsTable 明细表
     */
    let detailsTable;
    /**
     * summaryTable 汇总表
     */
    let summaryTable;
    let receiptStatusState = ['', "未收货", "部分收货", "无需收货", "收货完成"];
    let receiptStatusColors = ['', "label-info", "label-warning", "label-primary", "label-success"];
    let statusState = ['已删除', "未提交", "已提交", "被驳回", "已撤消", "待指派", "已指派"];
    let statusColors = ['label-danger', "label-default", "label-primary", "label-warning", "label-danger", "label-success", "label-primary"];
    /**
     * 当前表模式
     * @type {string}
     */
    let tableMode = 'details';

    /**
     * 加载明细模式的搜索内容，并在queryFormForGeneral的action上添加导出Excel的URL
     */
    function loadAdvancedQueryForm() {

        $("#queryFormForSummary").hide();
        $("#queryFormForGeneral").hide();
        $("#queryFormForAdvanced").show();
    }

    /**
     * 加载明细模式的搜索内容，并在queryFormForGeneral的action上添加导出Excel的URL
     */
    function loadDetailsQueryForm() {
        $("#queryFormForSummary").hide();
        $("#queryFormForAdvanced").hide();
        $("#queryFormForGeneral").show();
        tableMode = 'details'
        loadToolBar();
    }

    /**
     * 加载汇总模式的搜索内容，并删除对应的导出Excle的URL
     */
    function loadSummaryQueryForm() {
        $("#queryFormForGeneral").hide();
        $("#queryFormForAdvanced").hide();
        $("#queryFormForSummary").show();
        tableMode = 'summary'
        loadToolBar();
    }

    /**
     * 加载汇总表数据
     */
    function loadSummary() {
        if (detailsTable !== undefined) {
            js.table.destroy(detailsTable);
        }
        /** 汇总 */
        summaryTable = js.table.init({
            url: ctx + "buy/preOrderDetails/summaryList",
            paginationVAlign: 'both',
            pageSize: 15,
            pageList: [10, 15, 25, 50, 100, 300, 1000],               // 可供选择的每页的行数
            showColumns: true,
            showExport: false,
            showRefresh: true,
            clickToSelect: true,
            uniqueId: "code",
            queryForm: "queryFormForSummary",
            onLoadSuccess: function () {
                $("#btn-summary-search").prop('disabled', false).removeClass('disabled');
            },
            columns: [
                {
                    title: '序号', width: '50px',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {
                    title: "预购主题", field: 'name',
                    formatter: function (value, row, index, field) {
                        if (value && value.length > 50) {
                            return '<span title="' + value + '">' + value.substring(0, 50) + '</span> ';
                        } else {
                            return value;
                        }
                    }
                },
                {
                    title: "预购编号", field: 'code', width: '170px'
                },
                {
                    title: "预购日期", field: 'createTime', width: '150px'
                },
                {
                    title: "审批状态", field: 'status', width: '100px',
                    formatter: function (value, row, index) {
                        if (value) {
                            return '<span class="badge ' + statusColors[value] + '">' + statusState[value] + '</span> ';
                        }
                    }
                },
                {title: "申请人", field: 'applicant', width: '100px'},
                {title: "业务员", field: 'purchaser', width: '160px'},
                {title: "驳回原因", field: 'rejectReason', width: '100px'},
                {
                    title: "操作",
                    width: '240px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (hasP('buy:preorderdetails:view')) {
                            actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="openInfoModal(\'' + row.code + '\')"> 详情</a> ');
                        }
                        return actions.join('');
                    }
                }
            ]
        });
    }

    /**
     * 加载明细表数据
     */
    function loadDetails(formId, url) {
        if (summaryTable !== undefined) {
            js.table.destroy(summaryTable);
        }
        if (detailsTable !== undefined) {
            js.table.destroy(detailsTable);
        }
        /** 明细 */
        detailsTable = js.table.init({
            url: ctx + url,
            paginationVAlign: 'both',
            pageSize: 15,
            pageList: [10, 15, 25, 50, 100, 300, 1000],               // 可供选择的每页的行数
            showColumns: true,
            showExport: false,
            showRefresh: true,
            clickToSelect: true,
            uniqueId: "code",
            queryForm: formId,
            onLoadSuccess: function () {
                $("#btn-advanced-search").prop('disabled', false).removeClass('disabled');
                $("#btn-general-search").prop('disabled', false).removeClass('disabled');
            },
            columns: [
                {
                    title: '序号', width: 50,
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {
                    title: "物料跟踪号", field: 'trackNumber'
                },
                {
                    title: "物料描述", field: 'materialDesc', width: 400
                },
                {
                    title: "物料编码", field: 'materialCode'
                },
                {
                    title: "采购项目号", field: 'proCode'
                },
                {
                    title: "采购项目名", field: 'proName'
                },
                {
                    title: "预购数量", field: 'num'
                },
                {
                    title: "预购单位", field: 'unit'
                },
                {
                    title: "采购合同", field: 'pcNo'
                },
                {
                    title: "采购数量", field: 'purchNum'
                },
                {
                    title: "采购单位", field: 'purchUnit'
                },
                {
                    title: "税率", field: 'taxRate'
                },
                {
                    title: "票据类型", field: 'billType'
                },
                {
                    title: "含税单价", field: 'unitPrice'
                },
                {
                    title: "总价", field: 'totalPrice'
                },
                {title: "供应商", field: 'supplier'},

                {
                    title: "采购日期", field: 'purchCreate'
                },
                {
                    title: "导出记录", field: 'exportRecord'
                },
                {
                    title: "申请人", field: 'applicant'
                },
                {title: "业务员", field: 'purchaser'},
                {title: "预购备注", field: 'preOrderRemark'},
                {title: "采购备注", field: 'purchRemark'},
                {
                    title: "预购日期", field: 'createTime', width: '150px'
                },
                {
                    title: "关联预购主题", field: 'name', width: '150px'
                }, {
                    title: "预购计划编码", field: 'code', width: '150px'
                },
                {
                    title: "采购状态",
                    field: 'pcNo',
                    width: '150px',
                    formatter: function (value, row, index) {
                        if (value === undefined || value === null || value === '') {
                            return '<label class="badge label-default">未采购</label>';
                        } else {
                            return '<label class="badge label-success">已采购</label>';
                        }
                    }
                },
                {
                    title: "收货状态",
                    field: 'receiptStatus',
                    width: '150px',
                    formatter: function (value, row, index) {
                        if (value === 1) {
                            return '<label class="badge label-default">未收货</label>';
                        } else if (value === 2) {
                            return '<label class="badge label-success">已收货</label>';
                        } else if (value === 3) {
                            return '<label class="badge label-primary">无需收货</label>';
                        } else if (value === 4) {
                            return '<label class="badge label-warning">部分收货</label>';
                        }
                    }
                },
                {
                    title: "收货数量",
                    field: 'receivedNum',
                    width: '150px'
                },
                {
                    title: "收货进度",
                    field: '',
                    width: '150px',
                    formatter: progressFormatter
                },
                {
                    title: "附件", field: 'attachmentName', formatter: function (value, row, index) {
                        return '<a href="javascript:void(0)" onclick="downloadFile(' + row.id + ',\'' + row.formatter + '\')" title="点击下载">' + row.attachmentName + '</a>';
                    }
                }
            ]
        });
    }
    /* 3. 单元格 formatter */
    function progressFormatter(value,row,index){
        let p = 0;
        if(row.purchNum === undefined || row.purchNum === 0){
            p = 0;
        }else{
            let val = ((row.receivedNum/row.purchNum) * 100).toFixed(2);
            p = Number(val)||0;          // 容错
        }
        const color = percent2color(p);
        const html=`
    <div style="
        position:relative;
        width:100%; height:22px;
        background:#e9ecef; border-radius:4px;border:#333 solid 1px; ">
      <div style="
          position:absolute; left:0; top:0; bottom:0;
          width:${p}%;
          background:${color};
          border-radius:4px;
          transition:width .3s;"></div>
      <span style="
          position:relative; z-index:2;
          display:block; text-align:center; line-height:22px;
          color:#000; text-shadow:0 0 2px #FFF;
          font-size:12px;">${p}%</span>
    </div>`;
        return html;
    }
    /* 2. 颜色计算器：把 0-100 映射到渐变起止颜色 */
    function percent2color(p){
        const stops = [
            {pos:0,   r:255,g:67 ,b:54},
            {pos:25,  r:255,g:152,b:0},
            {pos:50,  r:255,g:235,b:59},
            {pos:75,  r:129,g:199,b:132},
            {pos:100, r:76 ,g:175,b:80}
        ];
        // 1. 越界保护
        p = Math.max(0, Math.min(100, p));

        // 2. 找到第一个 >= p 的区间
        let i = stops.findIndex(s => p <= s.pos);

        // 3. 边界保护：i=0 时左端还是 0，i=4 时右端还是 100
        const i1 = Math.max(0, i - 1);
        const i2 = Math.min(stops.length - 1, i);
        const s1 = stops[i1];
        const s2 = stops[i2];

        const t = (p - s1.pos) / (s2.pos - s1.pos);
        const r = Math.round(s1.r + (s2.r - s1.r) * t);
        const g = Math.round(s1.g + (s2.g - s1.g) * t);
        const b = Math.round(s1.b + (s2.b - s1.b) * t);
        return `rgb(${r},${g},${b})`;
    }
    /**
     * 切换到常规搜索
     */
    function switchGeneralSearch(mode) {
        let url = "";
        if (mode === 'general') {
            url = "buy/preOrderDetails/list"
        } else if (mode === 'advance') {
            url = "buy/preOrderDetails/advanceList"
        }
        loadDetailsQueryForm();
        loadDetails('queryFormForGeneral', url);
        tableMode = 'details';
        loadToolBar();
    }

    /**
     * 切换到高级搜索
     */
    function switchAdvancedSearch(mode) {
        let url = "";
        if (mode === 'general') {
            url = "buy/preOrderDetails/list"
        } else if (mode === 'advance') {
            url = "buy/preOrderDetails/advanceList"
        }
        loadAdvancedQueryForm();
        loadDetails('queryFormForAdvanced', url);
        tableMode = 'details';
        loadToolBar();


    }



    /**
     * 加载工具栏
     */
    function loadToolBar() {
        if (tableMode === 'summary') {
            if (hasP('buy:preorderdetails:view')) {
                $("#div_toolbar").html(``);
            }
        } else if (tableMode === 'details') {
            if (hasP('buy:preorderdetails:view')) {
                $("#div_toolbar").html(`
                            <a id="button_export"
                               href="javascript:void(0);"
                               class="btn btn-primary pull-right"
                               style="margin-right: 10px"
                               onclick="exportExcel()">
                                <span class="Bold">导出</span>
                            </a>`);
            }
        }
    }

    /**
     * 导出Excel
     */
    function exportExcel() {
        const queryFormForGeneralIsVisible = $('#queryFormForGeneral').is(':visible');
        if (queryFormForGeneralIsVisible) {
            $("#queryFormForGeneral").submit();
        }
        const queryFormForAdvancedIsVisible = $('#queryFormForAdvanced').is(':visible');
        if (queryFormForAdvancedIsVisible) {
            $("#queryFormForAdvanced").submit();
        }
    }

    /**
     * 下载附件
     * @param id 附件所属数据行ID
     * @param fileNameTitle 文件名
     */
    function downloadFile(id, fileNameTitle) {
        if (hasP('buy:preorderdetails:view')) {
            if (fileNameTitle !== undefined && fileNameTitle !== null) {
                js.post({
                    url: ctx + "buy/preOrderDetails/getAttachmentIsExist",
                    data: {id: id},
                    success: function (result) {
                        //如果文件存在
                        if (result.msg == "有文件") {
                            //下载文件
                            location.href = ctx + "buy/preOrderDetails/downloadAttachment/" + id;
                        } else {
                            js.modal.warning("没有附件可以下载！");
                        }
                    }
                });
            }
        } else {
            js.modal.warning("你没有下载权限！");
        }
    }

    /**
     * 打开详情模态框
     * @param code
     */
    function openInfoModal(code) {
        js.post({
            url: ctx + "buy/preOrderDetails/getProOrderPlanListByCode",
            data: {code: code},
            success: function (result) {
                let list = result.data;
                $('#infoPreOrderPlanForm input[name="name"]').val(list[0].name);
                $('#infoPreOrderPlanForm input[name="code"]').val(list[0].code);
                $("#outForInfo").empty();
                for (let i = 0; i < list.length; i++) {
                    let fileClass = 'label-default';
                    let fileStatus = '无附件';
                    let fileNameTitle = '';
                    if (list[i].attachmentName !== undefined && list[i].attachmentName !== null && list[i].attachmentName !== '') {
                        fileClass = 'label-success';
                        fileStatus = '有附件';
                        fileNameTitle = 'title = ' + list[i].attachmentName + '（点击下载）';
                    }
                    let no = i + 1;
                    $("#outForInfo").append(`<tr>
                                        <td>${no}</td>
                                        <td colspan="3">
                                            <input type="text" class="form-control" name="materialDesc" autocomplete="off" maxlength="255" value="${list[i].materialDesc}"  readonly="readonly" style="background: #FFFFFF" />
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="model" autocomplete="off" maxlength="255" value="${list[i].materialCode}"  readonly="readonly" style="background: #FFFFFF" />
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="unit" autocomplete="off" maxlength="255" value="${list[i].unit}"  readonly="readonly" style="background: #FFFFFF" />
                                        </td>
                                        <td>
                                            <input type="number" class="form-control" name="num" autocomplete="off" value="${list[i].num}"  readonly="readonly" style="background: #FFFFFF" />
                                        </td>
                                        <td >
                                            <input type="text" class="form-control" name="purchaser" autocomplete="off" maxlength="255" value="${list[i].purchaser}"  readonly="readonly" style="background: #FFFFFF" />
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="preOrderRemark" autocomplete="off" maxlength="255" value="${list[i].preOrderRemark}"  readonly="readonly" style="background: #FFFFFF" />
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="brand" autocomplete="off" maxlength="255" value="${list[i].brand}"  readonly="readonly" style="background: #FFFFFF" />
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="proCode" autocomplete="off" maxlength="255" value="${list[i].proCode}"  readonly="readonly" style="background: #FFFFFF" />
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="proName" autocomplete="off" maxlength="255" value="${list[i].proName}"  readonly="readonly" style="background: #FFFFFF" />
                                        </td>
                                        <td>
                                            <label onclick="downloadFile(${list[i].id},\'${fileNameTitle}\')" class="badge ${fileClass}" name="uploadFileText" ${fileNameTitle}>${fileStatus}</label>
                                            <input type="hidden" class="form-control" name="id" readonly="readonly" value="${list[i].id}" />
                                        </td>
                                    </tr>`);
                }
                js.modal.open("modal-info");
            }
        })

    }

    /**
     * 汇总模式 驳回单条
     * @param code
     */
    function rejectPlan(code) {
        js.modal.prompt("请编辑驳回原因", function (reason) {
            if (reason == null) {
                js.modal.warning("必须填写驳回原因！");
                return;
            }
            doReject([code], reason);
        });
    }
    $(function () {
        loadToolBar();
        /**
         * 如果选择明细模式
         */
        $("#input_details").on("change", function (e) {
            if ($("#input_details").is(":checked")) {
                loadDetailsQueryForm();
                loadDetails('queryFormForGeneral', "buy/preOrderDetails/list");
                tableMode = 'details';
            }
        });
        /**
         * 如果选择汇总模式
         */
        $("#input_summary").on("change", function (e) {
            if ($("#input_summary").is(":checked")) {
                loadSummaryQueryForm();
                loadSummary();
                tableMode = 'summary';
            }
        });
        /**
         * 加载明细数据
         */
        loadDetails('queryFormForGeneral', "buy/preOrderDetails/list");
    });

    /** 明细汇总表格搜索 */
    function search() {
        if (tableMode === 'summary') {
            $("#btn-summary-search").prop('disabled', true).addClass('disabled');
            js.table.search(summaryTable);
        } else if (tableMode === 'details') {
            $("#btn-advanced-search").prop('disabled', true).addClass('disabled');
            $("#btn-general-search").prop('disabled', true).addClass('disabled');
            js.table.search(detailsTable);
        }
    }


</script>
</body>
</html>